<template>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab
        :title="item.name"
        :name="item.shortName"
        v-for="item in data.cate"
        :key="item.shortName"
      ></van-tab>
      <div style="display: flex; flex-wrap: wrap; justify-content: space-around">
        
        <div v-for="item1 in data.list" :key="item1.rid" class="item">
          <div>
            <!-- 图片 -->
            <img v-lazy="item1.roomSrc"/>
            <!-- 右上角 -->
            <div>{{ item1.hn }}</div>
            <!-- 左下角 -->
            <div>{{ item1.nickname }}</div>
          </div>
          <!-- 房间名称 -->
          <div>{{ item1.roomName }}</div>
        </div>
      </div>
    </van-tabs>
  </template>
  
  <script setup lang="ts">
  import req from '@/utils/req'
  import { reactive, ref } from 'vue'
  // https://m.douyu.com/api/room/list?page=2&type=yz
  // req.get('https://m.douyu.com/api/cate/recList').then((res) => {
  // /douyu开头需要通过proxy代理的接口
  const data = reactive({
    cate: [],
    list: []
  })
  const active = ref(0)
  req.get('/douyu/cate/recList').then((res) => {
    console.log(res)
    if (res.data.code === 0) {
      data.cate = res.data.data
      onClickTab({ name: 'yz' })
    }
  })
  const onClickTab = (e: any) => {
    console.log(e)
    req.get('/douyu/room/list?page=1&type=' + e.name).then((res) => {
      console.log(res)
      data.list = res.data.data.list
    })
  }
  </script>
  
  <style lang="scss" scoped>
  .item {
    width: 48%;
    > div {
      position: relative;
      > img {
        width: 100%;
        display: block;
      }
      font-size: 0.8em;
      > div:nth-child(2) {
        color: white;
  
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        right: 0;
        top: 0;
      }
      > div:nth-child(3) {
        color: white;
  
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        position: absolute;
        bottom: 0;
        text-align: left;
        width: 100%;
      }
    }
  }
  </style>